/**
 * 基于jquery的number插件。
 * @author wuhua
 * @email wuhua@hashmap.cn
 */
(function ($) {
    $('head').append('<style>.number-inp{display: inline-block;overflow: hidden;vertical-align: middle;}.ni-inp input{border: none;vertical-align: middle;text-align: center;}.ni-but{font-size: 1em;background:#CCCCCC;cursor: pointer;width: 1em;text-align: center;height: 100%}.ni-cut{float: left}.ni-plus{float: right}.ni-inp{ float: left}.ni-inp input{ padding-left: 0;padding-right: 0;text-align: center;margin: 0;} </style>');
    //alert($);
    $.fn.number = function (options) {
        options = $.extend({}, options);
        return $(this).each(function () {
            //alert(this.tagName);
            if ('INPUT' == this.tagName) {
                var number = $(this).data('number');
                if (!number || !number.set)
                    $(this).data('number', new NumberInp(this, options));
                return $(this).data('number');
            }

        });
    };

    function NumberInp(e, options) {
        var that = this;
        this.e = $(e);
        this.o = options;
        this.val = 0;
        //alert();
        this.max = this.e.attr('max') == undefined ? options.max : NumberInp.parseInt(this.e.attr('max'));
        this.min = this.e.attr('min') == undefined ? options.min : NumberInp.parseInt(this.e.attr('min'));
        //alert(this.max);

        //+ &#43;
        //- &#45;

        //生成元素
        this.cut = $('<span class="ni-but ni-cut"> &#45; </span>');
        this.plus = $('<span class="ni-but ni-plus"> &#43; </span>');
        this.inp = $('<span class="ni-inp"></span>');


        this.ce = this.e.clone(true);
        this.val = this.ce.val();
        this.w = this.e.outerWidth();
        this.h = this.e.outerHeight();
        this.inp.append(this.ce);

        this.warp = $('<div class="number-inp" onselectstart="return false" onselect="return false"></div>');

        this.warp.append(this.plus);
        this.warp.append(this.cut);
        this.warp.append(this.inp);
        this.warp.css({
                width: this.w + 'px',
                height: this.h+'px',
                display: 'inline-block',
                border: this.e.css('border')
            }
        );


        //替换原来的元素
        this.e.replaceWith(this.warp);

        this.cut.height(this.h).width(this.h);
        this.plus.height(this.h).width(this.h);


        //this.inp.append(this.e);
        console.log(this.w, this.cut.outerWidth(), this.plus.outerWidth());
        this.ce.width(this.w - Math.ceil(this.cut.outerWidth()) - Math.ceil(this.plus.outerWidth()) - 2);

        $('span', this.warp).css({
            display: 'inline-block'
        });
        this.ce.change(function () {
            //alert('number');
            var val = NumberInp.parseInt($(this).val());
            //判断最大值
            if (that.max != undefined && val > that.max) {
                that.ce.val(that.max);
            } else if (that.min != undefined && val < that.min) {
                that.ce.val(that.min);
            }
            that.val = that.ce.val();
            return true;
        });
        //this.e.change();
        this.add = function () {
            this.ce.val(NumberInp.parseInt(this.ce.val()) + 1);
        };
        this.minus = function () {
            //alert('')
            this.ce.val(NumberInp.parseInt(this.ce.val()) - 1);
        };
        this.change = function () {
            this.ce.change();
        };
        this.plus.click(function () {
            that.add();
            that.change();
        });
        this.cut.click(function () {
            that.minus();
            that.change();
        });

    }

    NumberInp.parseInt = function (val) {
        //判断是否为数字
        val = parseInt(val);
        if ('' + val != 'NaN') {
            return val;
        }
        return 0;
    };


    $("input[type=number],.number").number({});//自动替换系统的number
})
(jQuery);